<!-- 
/******************************************************************************
 * Copyright (C) 2009-2011, Niels Mayer. All Rights Reserved. http://nielsmayer.com
 ******************************************************************************/
-->
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                                    <title>BrowsePodcasts</title>

<link rel='stylesheet' href='../../api/styles/common.css' type='text/css' />
<link rel='stylesheet' type='text/css' href='Exhibit-common.css'/>
<link rel='stylesheet' type='text/css' href='BrowsePodcasts-common.css'/>

<script type='text/javascript' src='ConsoleLogOverrides.js'></script>

<script type='text/javascript' src='PodcastBrowser.js'></script>
<script type='text/javascript' src='PodcastData.js'></script>
<script src="../../api/exhibit-api.js"></script>
<script src="../../api/extensions/time/time-extension.js" type="text/javascript"></script>
<script src="../../api/extensions/map/map-extension.js?gmapkey=ABQIAAAA5JLLfCE9c7HAtg25QM2KCRRyiP6mHEsQpwvxB19-hS9Kgd8RYhSXEtJVAXDUCZPqwtZZi7-HUYUYrw"></script>
<script type='text/javascript' src='Exhibit-0.js'></script>
<script type='text/javascript' src='Exhibit-1.js'></script>
<script type='text/javascript' src='Exhibit-2.js'></script>
<script type='text/javascript' src='ExhibitOverridesJS-0.js'></script>
</head>
<body id="body" class="viewbody hideleft">
    <ul id="path">
      <li><img src="../../images/left_arrow_img.png" onclick="window.qml.showExampleChooser();"/></li>
      <li><input type="checkbox" onclick="window.qml.enableScroll(this.checked);"
		 checked="true" class="flickable-checkbox"><span  onclick="(function() { var chk = SimileAjax.jQuery('input.flickable-checkbox')[0]; chk.click(); })();">Flickable??</span></input></li>
      <li><large>Browse Podcasts</large></li>
    </ul>

<div id="xwikimaincontainer">
<div id="xwikimaincontainerinner">

    <div id="mainContentArea">

<div id="xwikicontent">
<div ex:role="exhibit-collection" id="Podcasts"  ex:itemTypes="Podcast"  style="display: none;"></div>
<div ex:role="exhibit-collection" id="Producers" ex:itemTypes="Producer" style="display: none;"></div>
<div ex:role="exhibit-collection" id="Episodes"  ex:itemTypes="Episode"  style="display: none;"></div>
<div ex:role="coordinator"        id="episode"                           style="display:none"></div>
              <div class="thinbox-leftcol"
              id="sidebar"><span class="thinbox-leftcol-inner">
 <!--
    <div ex:role="facet" id="episodes-search-facet"
         ex:facetClass="TextSearch" 
         ex:facetLabel="Search Episodes" 
         ex:collectionID="Episodes"></div>
    <div ex:role="facet" id="episodes-hierarchichal-facet"
         ex:facetClass="HierarchicalFacet"
         ex:expression="value" 
         ex:uniformGrouping=".podcast"
         ex:facetLabel="Podcast Episodes"
         ex:scroll="true"
         ex:height="280px"
         ex:collectionID="Episodes"></div>
   <button type="button" class="minibtn" onclick="try { removeAllFeedEpisodesFromExhibitDB(); return false; } catch(e) { alert('ClearAllEpisodes: '+e+' ...'); return false; }">Clear All Episodes</button>
            <div ex:role="facet" id="podcasts-search-facet"
        ex:facetClass="TextSearch"
        ex:facetLabel="Search Podcasts"
                ex:collectionID="Podcasts"
        ></div>
      <div ex:role="facet" id="podcasts-topic-facet"
        ex:expression=".topic"
        ex:facetLabel="Topic"
                ex:missingLabel="(none)"
        ex:height="07em"
        ex:scroll="true"
        ex:sortMode="count"
        ex:collectionID="Podcasts"
        ></div>
 -->
      <div ex:role="facet" id="podcasts-producer-facet"
        ex:expression=".producer"
        ex:facetLabel="Producer"
                ex:height="07em"
        ex:scroll="true"
        ex:sortMode="count"
        ex:collectionID="Podcasts"
        ></div>
      <div ex:role="facet" id="podcasts-video-facet"
        ex:expression=".video"
        ex:scroll="false"
        ex:showMissing="false"
        ex:facetLabel="Video?"
        ex:collectionID="Podcasts"
        ></div>
   <div ex:role="facet" id="podcasts-failed-facet"
        ex:expression="exists(.fetchFailed)"
        ex:scroll="false"
        ex:selection="false"
        ex:facetLabel="Failed?"
        ex:collectionID="Podcasts"
        ></div>
   <div ex:role="facet" id="podcasts-fetched-facet"
        ex:expression="exists(.episodeList)"
        ex:scroll="false"
        ex:facetLabel="Browsed?"
        ex:collectionID="Podcasts"
        ></div>
    </span></div>

<!--
<div class="thinbox-rightcol" id="browse-episodes">
<span class="thinbox-rightcol-inner">
    <div ex:role="viewPanel" id="episodes-viewpanel"> 
          <div ex:role="view" id="episodes-intro-view"           ex:viewClass="HTML" 
          ex:label="Welcome/Help"
          ex:title="How to Use this Application, Links to further information..."
      >
     <div class="fooconbox" id="episodes-intro-view">

<span class="fooconinner">
<h4 id="HPlayNationalPublicRadioPodcasts"><span>Play National Public Radio Podcasts</span></h4><p/>
<h5 id="HWelcome2FHelp"><span>Welcome/Help</span></h5><p/>
       For those that want to listen to public radio/tv broadcasts on your
       fast-networked work/home computer, on your schedule, for your
       interests. Right now. No waiting, no downloading, no
       subscribing&#8230; just "browsing."  Shift-Reload often as i'm adding
       features. For more information, see <a
       href="/xwiki/bin/view/ts/PodsHelp?xpage=print"
       onclick="openURL('/xwiki/bin/view/ts/PodsHelp?xpage=print', '_blank'); return false;">Help and
       Instructions</a>.<p/>
<h5 id="HThanksandAcknowledgements"><span>Thanks and Acknowledgements</span></h5><p/>
       (1) <span class="wikiexternallink"><a href="http://www.xwiki.org/xwiki/bin/view/Main/WebHome">XWiki</a></span> the platform and development environment.
       (2) MIT <span class="wikiexternallink"><a href="http://simile.mit.edu/">Simile Project</a></span> <span class="wikiexternallink"><a href="http://www.simile-widgets.org/exhibit/">Exhibit</a></span> and <span class="wikiexternallink"><a href="http://www.simile-widgets.org/timeline/">Timeline</a></span> Widgets: "Semantic Interoperability of Metadata and Information in unLike Environments"
       (3) <span class="wikiexternallink"><a href="http://www.prototypejs.org/">Prototype</a></span>, <span class="wikiexternallink"><a href="http://jquery.com/">JQuery</a></span> and all the people that gave workarounds to Internet Exlorer issues.
       (4) The open source community and Google, specifically, for supporting XWiki through <span class="wikiexternallink"><a href="http://dev.xwiki.org/xwiki/bin/view/GoogleSummerOfCode/">Google Summer of Code</a></span> and for hosting numerous projects, including the entire <span class="wikiexternallink"><a href="http://code.google.com/p/simile-widgets/">Simile Widgets</a></span> on google-code.
       (5) The <span class="wikiexternallink"><a href="http://www.omras2.org/">Omras2</a></span> project -- ontology-driven music retrieval & annotation sharing service. 
       </span>

</div>
     </div>           <div ex:role="view" id="episodes-timeline-view" name="episodes-timeline-view"         ex:collectionID="Episodes"
        ex:viewClass="Timeline"
        ex:label="EpiLine"
        ex:title="Podcast Episodes Timeline by Publication Date"
        ex:start=".entryTime"
        ex:eventLabel=".label"
        ex:hoverText="if(exists(.entryDesc), .entryDesc, .podcast.label)"
        ex:colorKey=".podcast.label"
        ex:topBandUnit="week"
        ex:bottomBandUnit="month"
        ex:topBandPixelsPerUnit="200"
        ex:bottomBandPixelsPerUnit="100"
        ex:bubbleWidth="640"            ex:timelineHeight="300"         ex:showToolbox="false"         ex:showHeader="false"
        ex:showSummary="false"
        ex:showFooter="true"
     ><span ex:role="lens" class="episode-lens" style="display: none;"
            ex:itemTypes="Episode"
      ><table class="episode-bubble-header"><tr><td class="episode-bubble-thumbnail">
      <button type="button"
              class="thumbtn"
              onclick="if  (!(SimileAjax.Platform.browser.isIE)) return processEpisodeThumBtnClick(this);"               onmouseup="if (SimileAjax.Platform.browser.isIE) return processEpisodeThumBtnClick(this);"    ><div class="thumboxDiv">
      <span ex:select=".podcast.fetchedImg">
                                            <img ex:case="..."                 height="75" width="75" 
                class="thumboxImg"
	        ex:src-content="if(exists(.podcast.img), .podcast.img, 'http://media.npr.org/images/podcasts/ui/no_image_available.gif')"
            >
           <img height="75" width="75" 
                class="thumboxImg"
	        ex:src-content=".podcast.fetchedImg"
            >
      </span>    </div>
    <div ex:content=".podcast.label" class="thumboxAuto"></div></button>

   </td>
   <td>
    <table class="episode-bubble-info">
      <caption><strong class="episode-bubble-title" ex:content=".label"></strong></caption>
      <tr class="episode-bubble-producer")">       <td>Producer:</td>
       <td><span ex:if="exists(.podcast.producer.link)">
	     <a ex:href-content=".podcast.producer.link" target="_blank"><span ex:content=".podcast.producer.label"></span></a>
             <span ex:content=".podcast.producer"></span>

          </span>
       </td>
      </tr>
      <tr class="episode-bubble-topic">
       <td>Topic:</td>
       <td ex:content=".podcast.topic"></td>
      </tr>
      <tr class="episode-bubble-npr">

       <td>NPR:</td>
       <td><a ex:href-subcontent="http://www.npr.org/rss/podcast/podcast_detail.php?siteId={{.podcast}}" target="_blank">
           <span ex:content=".podcast.label"></span></a></td>
      </tr>
      <tr class="episode-bubble-podcast" >
       <td>Podcast:</td>
       <td><a ex:href-content=".podcast.fetchedLink" target="_blank"><span ex:content=".podcast.fetchedTitle"></span></a></td>
      </tr>

      <tr class="episode-bubble-media" >
       <td>Media/Link:</td>
       <td><a ex:href-content=".entryURI" target="_blank">download</a></td>
      </tr>
      <tr class="episode-bubble-date" >
        <td>Published:</td>
        <td ex:content=".entryTime"></td>

      </tr>
    </table>
   </td></tr></table>
   <div class="jwframe">       <button type="button" class="minibtn"
              onclick="player_PlayNow_AddPlaylist(this)">Play Now & Add Playlist</button>
      <button type="button" class="minibtn"
              onclick="player_AddPlaylist(this)">Add to Playlist</button>
      <button type="button" class="minibtn"
              onclick="player_AddEndPlaylist(this)">Add to End of Playlist</button>

   </div>    <div class="episode-bubble-description" ex:content=".entryDesc"></div>
  </span>  </div>           <div ex:role="view" id="episodes-bookmarks-view"           ex:viewClass="HTML" 
          ex:label="EpiMarks"
          ex:title="Bookmarks of Favorite Podcast Episodes"
      >
       <div class="fooconbox" id="episodes-bookmarks-view">
<span class="fooconinner">
<h4 id="HEpisodes2FBookmarks"><span>Episodes/Bookmarks</span></h4><p/>
        &#8230;
<h5 id="HTODO21"><span>TODO!</span></h5><p/>
        &#8230;

       </span>
</div>
     </div>           <div ex:role="view" id="episodes-history-view"           ex:viewClass="HTML" 
          ex:label="EpiStory"
          ex:title="History of Episodes Seen During This Session"
      >
       <div class="fooconbox" id="episodes-history-view">
<span class="fooconinner">
<h4 id="HEpisodes2FHistory"><span>Episodes/History</span></h4><p/>
        &#8230;
<h5 id="HTODO21-1"><span>TODO!</span></h5><p/>
        &#8230;

       </span>
</div>
     </div>    </div>     </span></div>
-->
<div class="thinbox-rightcol" id="browse-feeds-and-playback">
<span class="thinbox-rightcol-inner">
            <div class="status-outer">
   <div class="status-inner">
    <IMG src="icons/msginfo.png" id="status_img" name="status_img" />&nbsp;&nbsp;<SPAN id="status_msg" name="status_msg">Select a feed below, view by clicking on feed entry in Timeline above...</SPAN>
   </div>    </div>             <div ex:role="viewPanel" id="podcasts-viewpanel">

          <div ex:role="view" id="episodes-thumbnail-view"           ex:collectionID="Podcasts"
          ex:viewClass="Thumbnail"
          ex:label="Podcasts"
          ex:title="Browse Podcasts"
          ex:orders=".producer"
          ex:grouped="false"
          ex:possibleOrders=".label, .producer, .topic"
          ex:showAll="true"              ex:showFooter="true"           ex:paginate="true"   	  ex:pageSize="30"               ex:showToolbox="false"
          ex:showSummary="false"
          ex:showHeader="false"       ><span ex:role="lens" ex:itemTypes="Podcast" class="podcast-lens" style="display: none;">
       <button type="button"
               class="thumbtn"
               onclick="if  (!(SimileAjax.Platform.browser.isIE)) return processPodcastThumBtnClick(this);"                onmouseup="if (SimileAjax.Platform.browser.isIE) return processPodcastThumBtnClick(this);"        >
                    <span ex:if="exists(.fetchFailed)">                        <div class="thumboxDivFailure">
                <img height="75" width="75"                     class="thumboxImg"	              ex:src-content="if(exists(.img), .img, 'http://media.npr.org/images/podcasts/ui/no_image_available.gif')"                 >            </div>                        <span ex:if="exists(.fetchedImg)">                          <span ex:if="exists(.episodeList)">                              <div class="thumboxDivSuccess">                <span ex:select=".fetchedImg">                 <img ex:case="..."                      height="75" width="75"                      class="thumboxImg"	              ex:src-content="if(exists(.img), .img, 'http://media.npr.org/images/podcasts/ui/no_image_available.gif')"                  >                 <img height="75" width="75"                      class="thumboxImg"	              ex:src-content=".fetchedImg"                  ></span></div>                              <div class="thumboxDiv">                <span ex:select=".fetchedImg">                 <img ex:case="..."                      height="75" width="75"                      class="thumboxImg"	              ex:src-content="if(exists(.img), .img, 'http://media.npr.org/images/podcasts/ui/no_image_available.gif')"                  >                 <img height="75" width="75"                      class="thumboxImg"	              ex:src-content=".fetchedImg"                  ></span></div>             </span>                          <span ex:if="exists(.episodeList)">                              <div class="thumboxDivSuccess">

                   <img height="75" width="75"                        class="thumboxImg"                        ex:src-content="if(exists(.img), .img, 'http://media.npr.org/images/podcasts/ui/no_image_available.gif')"                    >               </div>                              <div class="thumboxDiv"
                ><img height="75" width="75"                      class="thumboxImg"                      ex:src-content="if(exists(.img), .img, 'http://media.npr.org/images/podcasts/ui/no_image_available.gif')"                  ></div>             </span>            </span>          </span>                    <span ex:if="exists(.fetchFailed)">                        <div ex:content=".label" class="thumboxCaptionFailure"></div>                        <span ex:if="exists(.episodeList)">                            <div ex:content=".label" class="thumboxCaptionSuccess"></div>                            <div ex:content=".label" class="thumboxCaption"></div>            </span>          </span>         </button>
     </span>   </div>       <div ex:role="view" id="podcasts-map-view"         ex:collectionID="Podcasts"
        ex:viewClass="Map"
        ex:label="PodMap"
        ex:title="Google Map of Podcast Producers"
        ex:latlng=".producer.addressLatLng"
        ex:colorKey=".producer.label"
        ex:center="38.479394673276445, -95.361328125"
        ex:zoom="4"
        ex:mapHeight="300"               ex:showToolbox="false"         ex:showHeader="false"
        ex:showSummary="false"
        ex:showFooter="true"
        >

   </div>       <div ex:role="view" id="podcasts-bookmarks-view"         ex:viewClass="HTML" 
        ex:label="PodMarks"
        ex:title="Bookmarks of Favorite Podcasts"
    >
     <div class="fooconbox" id="podcasts-bookmarks-view">
<span class="fooconinner">
<h4 id="HPodcasts2FBookmarks"><span>Podcasts/Bookmarks</span></h4><p/>
      &#8230;
<h5 id="HTODO21-2"><span>TODO!</span></h5><p/>
      &#8230;
     </span>
</div>

   </div>       <div ex:role="view" id="podcasts-history-view"         ex:viewClass="HTML" 
        ex:label="PodStory"
        ex:title="History of Podcasts Visited this Session"
    >
     <div class="fooconbox" id="podcasts-history-view">
<span class="fooconinner">
<h4 id="HPodcasts2FHistory"><span>Podcasts/History</span></h4><p/>
      &#8230;
<h5 id="HTODO21-3"><span>TODO!</span></h5><p/>
      &#8230;
     </span>
</div>

   </div>       <div ex:role="view" id="episode-playback-view"         ex:viewClass="HTML" 
        ex:label="PlayPod"
        ex:title="Play a Podcast Episode, view Podcast details, become a trainspodder..."
    ><div class="jwframe">       <div class="jwplayerBrowsePodcasts"><a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Plugin to play audio/video files.</a></div><script type="text/javascript">setTimeout(function() { player_init('jwplayerBrowsePodcasts'); }, 0);</script>
     </div>    </div>         </div>     </span></div>  
<script type="text/javascript">
/* <![CDATA[ */
setTimeout (function () { /* for XE>=2.4, call in 0-length timeout to allow deferred loading to load everything first... previously, waited for div#mainContentArea div#xwikicontent */
    onLoadExhibit();
  }, 0);
/* ]]> */
</script>

</div>


    <div class="clearfloats"></div>
  </div> 
</div></div></div></body>
</html>
